export const checkEmail = async (userEmail: string) => {
  // 추후에  /v1/auth/check-email 변경
  const response = await customAxios.post('/v1/auth/check-email', userEmail);
  return response;
};

export const customAxios = axios.create({
  baseURL: BASE_API_URL,
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' },
});

import { message } from 'antd';
import { NoticeType } from 'antd/es/message/interface';

export const useMessage = () => {
  const [messageApi, contextHolder] = message.useMessage();

  const customMessage = (content: string, type: NoticeType = 'success') =>
    messageApi.open({
      type,
      content,
    });
  return { customMessage, contextHolder };
};

customMessage('비밀번호를 수정하였습니다.');
customMessage('비밀번호 수정에 실패하였습니다.', 'error');

export const checkEmail = async (userEmail: string) => {
  // 추후에  /v1/auth/check-email 변경
  const response = await customAxios.post('/v1/auth/check-email', userEmail);
  return response;
};

export const customAxios = axios.create({
  baseURL: BASE_API_URL,
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' },
});

(Home.tsx)
import { Layout, Modal } from 'antd';
import { Content } from 'antd/es/layout/layout';
import { useState } from 'react';
import Calendar from './calendar';
import Signin from '@/page/home/signin';
import {
  useAddingSchedule,
  useDataFetching,
  useLoginModalOpen,
} from './home.hook';
import Sidebar from './sidebar';

export default function Home() {
  const [year, setYear] = useState(new Date().getFullYear());

  const {
    events,
    mySchedule,
    sideMySchedule,
    usersYearlySchedulesLoading,
    myPendingScheduleList,
    pendingLoading,
    setReRender,
    setMyPendingScheduleList,
  } = useDataFetching(year);

  const { isModalOpen, setIsModalOpen } = useLoginModalOpen();

  const {
    scheduleInput,
    contextHolder,
    isAddingRequest,
    accessToken,
    handleSelect,
    handleDatePicker,
    handleRangePicker,
    handleSubmitSchedule,
  } = useAddingSchedule(setReRender, setMyPendingScheduleList);

  return (
    <>
      {contextHolder}

      {/* 로그인 창 */}
      <Modal
        title="로그인"
        centered
        closeIcon={false}
        footer={null}
        open={isModalOpen}
      >
        <Signin setIsModalOpen={setIsModalOpen} />
      </Modal>

      <Layout
        style={{
          filter: accessToken ? '' : 'blur(5px)',
          userSelect: 'none',
          height: 'calc(100vh - 60px)',
          display: 'flex',
          flexDirection: 'row',
        }}
      >
        <Sidebar
          handleDatePicker={handleDatePicker}
          handleRangePicker={handleRangePicker}
          handleSelect={handleSelect}
          handleSubmitSchedule={handleSubmitSchedule}
          isAddingRequest={isAddingRequest}
          myPendingScheduleList={myPendingScheduleList}
          pendingLoading={pendingLoading}
          scheduleInput={scheduleInput}
          setMyPendingScheduleList={setMyPendingScheduleList}
          sideMySchedule={sideMySchedule}
          usersYearlySchedulesLoading={usersYearlySchedulesLoading}
        />
        <Layout style={{ paddingLeft: 10, flex: 1, height: '100%' }}>
          <Content
            style={{
              background: 'white',
              height: '100%',
              overflow: 'auto',
            }}
          >
            <Calendar
              mySchedule={mySchedule}
              events={events}
              year={year}
              setYear={setYear}
              usersYearlySchedulesLoading={usersYearlySchedulesLoading}
            />
          </Content>
        </Layout>
      </Layout>
    </>
  );
}

(hooks)
import { scheduleList } from '@/api/home/scheduleList';
import { AccessTokenAtom } from '@/recoil/AccessTokkenAtom';
import { useEffect, useState } from 'react';
import { SetterOrUpdater, useRecoilState, useRecoilValue } from 'recoil';
import { UserEmailAtom } from '@/recoil/UserEmailAtom';
import dayjs from 'dayjs';
import { DUTY_ANNUAL } from '@/data/constants/commons';
import { pendingList } from '@/api/home/pendingList';
import { ReRenderStateAtom } from '@/recoil/ReRenderStateAtom';
import { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
import { message } from 'antd';
import { addScheduleRequest } from '@/api/mySchedule';
import { ScheduleItem, mySchedule } from './home.type';

export const useDataFetching = (year: number) => {
  const accessToken = useRecoilValue(AccessTokenAtom);
  const userEmail = useRecoilValue(UserEmailAtom);
  const [events, setEvents] = useState<ScheduleItem[]>([]);
  const [reRender, setReRender] = useRecoilState(ReRenderStateAtom);

  const [sideMySchedule, setSideMyschedule] = useState<
    {
      id: number;
      key: number;
      scheduleType: EmployeeRequestType;
      startDate: string;
      endDate: string;
      state: EmployeeRequestResult;
    }[]
  >([]);

  const [usersYearlySchedulesLoading, setUsersYearlySchedulesLoading] =
    useState(false);

  useEffect(() => {
    const getUsersYearlySchedules = async () => {
      if (!accessToken) {
        return;
      }
      try {
        setUsersYearlySchedulesLoading(true);
        const listResponse = await scheduleList(year);
        const listResponseData = listResponse.data.response;
        const sideMyScheduleData = listResponseData
          .filter((item: mySchedule) => item.userEmail === userEmail)
          .map((item: mySchedule) => {
            return {
              id: item.id,
              key: item.id,
              scheduleType: item.scheduleType,
              startDate: item.startDate,
              endDate: item.endDate,
              state: item.state,
            };
          });
        setSideMyschedule(sideMyScheduleData);
        const events = listResponseData
          .filter((item: mySchedule) => item.state === 'APPROVE')
          .map((item: ScheduleItem) => {
            const adjustEndDate = dayjs(item.endDate)
              .add(1, 'day')
              .format('YYYY-MM-DD');
            return {
              userEmail: item.userEmail,
              title: item.userName,
              start: item.startDate,
              end: adjustEndDate,
              color: DUTY_ANNUAL[item.scheduleType].color,
            };
          });
        setEvents(events);
      } catch (error) {
        console.error(error);
      } finally {
        setUsersYearlySchedulesLoading(false);
      }
    };
    getUsersYearlySchedules();
  }, [year, accessToken, userEmail, setUsersYearlySchedulesLoading]);

  const mySchedule = events.filter((event) => event.userEmail === userEmail);

  const [myPendingScheduleList, setMyPendingScheduleList] = useState<
    {
      id: number;
      key: number;
      scheduleType: EmployeeRequestType;
      startDate: string;
      endDate: string;
      state: 'PENDING';
    }[]
  >([]);

  const [pendingLoading, setPendingLoading] = useState(false);
  useEffect(() => {
    const myPendingSchedule = async () => {
      if (!accessToken) {
        return;
      }
      try {
        setPendingLoading(true);
        const response = await pendingList(year);
        const responseData = response.data.response;

        const myPendingScheduleData = responseData.map((item: mySchedule) => {
          return {
            id: item.id,
            key: item.id,
            scheduleType: item.scheduleType,
            startDate: item.startDate,
            endDate: item.endDate,
            state: item.state,
          };
        });
        setMyPendingScheduleList(myPendingScheduleData);
      } catch (error) {
        console.error(error);
      } finally {
        setPendingLoading(false);
      }
    };
    myPendingSchedule();
  }, [year, accessToken, reRender]);

  return {
    events,
    usersYearlySchedulesLoading,
    sideMySchedule,
    mySchedule,
    pendingLoading,
    myPendingScheduleList,
    setReRender,
    setMyPendingScheduleList,
  };
};

export const useLoginModalOpen = () => {
  const accessToken = useRecoilValue(AccessTokenAtom);

  const [isModalOpen, setIsModalOpen] = useState<boolean>(!accessToken);
  // 로그아웃을 하면 isModalOpen이 !accessToken의 상태를 바로 반영하지 않음
  // 따라서 useEffect로 반영이 되도록함
  useEffect(() => {
    setIsModalOpen(!accessToken);
  }, [accessToken]);

  return {
    isModalOpen,
    setIsModalOpen,
  };
};

export const useAddingSchedule = (
  setReRender: SetterOrUpdater<boolean>,
  setMyPendingScheduleList: React.Dispatch<
    React.SetStateAction<
      {
        id: number;
        key: number;
        scheduleType: EmployeeRequestType;
        startDate: string;
        endDate: string;
        state: 'PENDING';
      }[]
    >
  >,
) => {
  const [messageApi, contextHolder] = message.useMessage();
  const [isAddingRequest, setIsAddingRequest] = useState(false);
  const accessToken = useRecoilValue(AccessTokenAtom);
  accessToken;
  const [scheduleInput, setScheduleInput] = useState<{
    scheduleType: string;
    startDate: string;
    endDate: string;
  }>({
    scheduleType: '',
    startDate: '',
    endDate: '',
  });
  const handleSelect = (value: string) => {
    setScheduleInput({
      startDate: '',
      endDate: '',
      scheduleType: value,
    });
  };
  const handleRangePicker = (value: RangePickerProps['value']) => {
    const startDate = value && value[0];
    const endDate = value && value[1];
    setScheduleInput((prev) => ({
      ...prev,
      startDate: dayjs(startDate).format('YYYY-MM-DD'),
      endDate: dayjs(endDate).format('YYYY-MM-DD'),
    }));
  };

  const handleDatePicker = (value: DatePickerProps['value']) => {
    const startDate = dayjs(value).format('YYYY-MM-DD');
    setScheduleInput((prev) => ({
      ...prev,
      startDate: dayjs(startDate).format('YYYY-MM-DD'),
      endDate: dayjs(startDate).format('YYYY-MM-DD'),
    }));
  };

  const handleSubmitSchedule = async () => {
    if (!accessToken) {
      return;
    }
    try {
      setIsAddingRequest(true);
      const response = await addScheduleRequest(scheduleInput);
      if (response.status === 200) {
        messageApi.open({
          type: 'success',
          content: `${
            DUTY_ANNUAL[
              response.data.response.scheduleType as EmployeeRequestType
            ]?.label
          } 신청 완료`,
        });

        if (response.data.response.scheduleType === 'ANNUAL') {
          setReRender((prev) => !prev);
        }

        if (response.data.response.scheduleType === 'DUTY') {
          const newPendingSchedule = {
            id: response.data.response.id,
            key: response.data.response.id,
            scheduleType: response.data.response.scheduleType,
            startDate: response.data.response.startDate,
            endDate: response.data.response.endDate,
            state: response.data.response.state,
          };
          setMyPendingScheduleList((prev) => {
            return [...prev, newPendingSchedule];
          });
        }
      }
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (error: any) {
      messageApi.open({
        type: 'error',
        content:
          error.response?.data.error.message ||
          '연차, 당직 신청 등록 중 오류가 발생하였습니다.',
      });
    } finally {
      setIsAddingRequest(false);
    }
  };

  return {
    contextHolder,
    isAddingRequest,
    accessToken,
    handleSelect,
    handleRangePicker,
    handleDatePicker,
    handleSubmitSchedule,
    scheduleInput,
  };
};